<template>
  <table-header
          :queryList="queryList"
          @pagination="getDataList"
          :rightColSpan="8"
          :leftColSpan="16"
  >
    <template #filter>
      <el-input
              placeholder="请输入媒资名称"
              clearable
              v-model="queryList.keyword"
              class="input-w mr10" size="mini"
              @clear="handleFilterMedia"
              @keyup.enter="handleFilterMedia"
      />
      <el-select placeholder="请选择审核状态"
                 v-model="selectedState"
                 class="input-w" size="mini"
                 clearable
                 @change="handleFilterMedia"
      >
        <el-option
                v-for="state in stateList"
                :key="state.label + state.value"
                :label="state.label"
                :value="state.value"
        />
      </el-select>
    </template>
    <el-button type="primary" size="mini" @click="handleFilterMedia" class="ml10">
      <el-icon>
        <search />
      </el-icon>
      搜索
    </el-button>
    <template #operation>
      <el-button type="primary" size="mini" @click="handleBatchPass">批量通过审核</el-button>
      <el-button type="warning" size="mini" @click="handleBatchNoPass">批量不通过审核</el-button>
    </template>
  </table-header>
  <el-table
          ref="mediaTableRef"
          :data="tableData.listData"
          v-loading="isloading"
          @select="handleSelectRow"
          @select-all="handleSelectAllRow"
          @row-click="handleClickRow"
          border
          class="mt10" 
          :height="tableHeight">
    <el-table-column type="selection" width="50" align="center" />
    <el-table-column label="缩略图" width="60">
      <template #default="{row}">
        <span @click.stop>
          <el-image
                  v-if="typeof row.thumbs == 'object' && row.thumbs.length > 0"
                  :preview-src-list="srcList"
                  :initial-index="initialIndex(row.thumbs[0].viewurl)"
                  :src="row.thumbs[0].isself == 1 ? row.thumbs[0].viewurl + '&width=60px' : row.thumbs[0].viewurl"
          />
        </span>
      </template>
    </el-table-column>
    <el-table-column label="媒资ID" width="100" align="center">
      <template #default="{row}">
        {{row.mediaid}}
      </template>
    </el-table-column>
    <el-table-column label="媒资名称" show-overflow-tooltip>
      <template #default="{row}">
        <a href="javascript:;" @click.stop="handleToMediaDetail(row)">
          {{row.name}}
        </a>
      </template>
    </el-table-column>
    <el-table-column label="媒资类型"  align="center">
      <template #default="{row}">
        {{mediaTypes[row.mediatype]}}
      </template>
    </el-table-column>
    <el-table-column label="一级分类"  align="center">
      <template #default="{row}">
        {{row.catname}}
      </template>
    </el-table-column>
    <el-table-column label="是否多集" width="80" align="center">
      <template #default="{row}">
        <span v-if="row.hasseries == 0">单集</span>
        <span v-else>多集</span>
      </template>
    </el-table-column>
    <el-table-column label="审核状态" width="100" align="center">
      <template #default="{row}">
        <el-tooltip
                v-if="row.comments"
                class="box-item"
                effect="dark"
                :content="row.comments"
                placement="right-start"
        >
          <span>{{getStateName(row.state)}}</span>
        </el-tooltip>
        <span v-else>{{getStateName(row.state)}}</span>

      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="{row}">
        <el-button type="text" size="mini" @click.stop="handleMediaReviewLogs(row)">审核记录</el-button>
        <el-button v-if="row.state != 2" type="text" size="mini" @click.stop="handlePassReview(row)">通过</el-button>
        <el-button v-if="row.state != 3" type="text" size="mini" style="color:red;" @click.stop="handleNoPassReview(row)">不通过</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-row class="mt10">
    <el-col :span="24">
      <table-pagination
              :queryList="queryList"
              :total="tableData.total"
              @pagination="getDataList"
      />
    </el-col>
  </el-row>
  <media-review-logs
          ref="mediaReviewLogsRef"
          :dialog-review-logs-title="dialogReviewLogsTitle"
          :dialog-review-logs-visible="dialogReviewLogsVisible"
          :dialog-review-mediaid="dialogReviewMediaid"
          @handleCancelReviewLogsDialog="handleCancelReviewLogsDialog"
  />
</template>

<script>
  import {reactive, ref, computed, nextTick,onMounted} from 'vue'
  import {useRouter} from 'vue-router'
  import TableHeader from "@/views/public/TableHeader";
  import TablePagination from "@/views/public/TablePagination";
  import {postReviewMedias} from "@/api/media/review";
  import mediaTypeMixin from "@/mixins/mediaTypeMixin";
  import {ElMessageBox, ElMessage} from 'element-plus'
  import {Search} from "@element-plus/icons"
  import {getRelMedias} from "@/api/media/media";
  import MediaReviewLogs from "./components/MediaReviewLogs";

  export default {
    name: "index",
    
    components: {TablePagination, TableHeader, Search, MediaReviewLogs},
    setup() {
      const router = useRouter()
      const queryList = reactive({
        page: 1,
        pagesize: 25,
        keyword: undefined,
        states: [1,2,3]
      })
      const isloading = ref(false)
      const tableData = reactive({
        total: 0,
        listData: []
      })
      const stateList = ref([
        {label: '提交审核', value: 1},
        {label: '审核通过', value: 2},
        {label: '审核不通过', value: 3},
      ])
      const srcList = ref([])
      const {mediaTypes} = mediaTypeMixin()
      const formData = reactive({
        state: 0,
        comments: '',
        mediaids: []
      })
      const mediaTableRef = ref(null)
      const selectedState = ref('')
      /** 查看媒资审核记录变量开始 **/
      const dialogReviewLogsVisible = ref(false)
      const dialogReviewLogsTitle = ref('')
      const dialogReviewMediaid = ref(0)
      const mediaReviewLogsRef = ref(null)
      /** 查看媒资审核记录变量结束 **/

      //table高度自适应
      const tableHeight=ref()
      
      onMounted( () => {
        tableHeight.value =
        window.innerHeight - mediaTableRef.value.$el.offsetTop - 80;
        
      })
      /** 获取点击图片的index **/
      const initialIndex = computed(() => {
        return (src) => {
          const index = srcList.value.findIndex(item => {
            return item == src
          })
          return index
        }
      })

      /** 获取媒资列表 **/
      const getDataList = () => {
        isloading.value = true
        getRelMedias(queryList).then(response => {
          isloading.value = false
          const {total, list} = response.data
          tableData.total = total
          tableData.listData = list
          srcList.value = []
          tableData.listData.forEach((row) => {
            if (typeof row.thumbs == 'object' && row.thumbs.length > 0) {
              srcList.value.push(row.thumbs[0].viewurl)
            }
          })
        })
      }
      /** 搜索媒资 **/
      const handleFilterMedia = () => {
        queryList.page = 1
        if (selectedState.value) {
          queryList.states = [selectedState.value]
        } else {
          queryList.states = [1, 2, 3]
        }
        getDataList()
      }
      /** 获取审核状态 **/
      const getStateName = (value) => {
        let stateName = ''
        stateList.value.forEach(state => {
          if (state.value == value) {
            stateName = state.label
          }
        })
        return stateName
      }
      /** 审核通过处理 **/
      const handlePassReview = (row) => {
        formData.state = 2
        formData.mediaids = []
        formData.mediaids.push(row.mediaid)
        postFormData()
      }
      /** 审核不通过处理 **/
      const handleNoPassReview = (row) => {
        formData.state = 3
        formData.mediaids = []
        formData.mediaids.push(row.mediaid)
        postFormData()
      }
      /** 前往媒资详情页 **/
      const handleToMediaDetail = (row) => {
        router.push({path: '/review/media/detail', query: {mediaid: row.mediaid, mediatype: row.mediatype}})
      }
      /** 选择媒资 **/
      const handleSelectRow = (selection, row) => {
        handleFormateIds(row)
      }
      /** 全选 **/
      const handleSelectAllRow = (selection) => {
        if (selection.length > 0) {
          selection.forEach(row => {
            if (!formData.mediaids.includes(row.mediaid)) {
              formData.mediaids.push(row.mediaid)
            }
          })
        } else {
          formData.mediaids = []
        }
      }
      /** 点击媒资行事件 **/
      const handleClickRow = (row) => {
        handleFormateIds(row)
      }
      /** 封装ID数据 **/
      const handleFormateIds = (row) => {
        if (formData.mediaids.includes(row.mediaid)) {
          const index = formData.mediaids.findIndex(d => d == row.mediaid)
          formData.mediaids.splice(index, 1)
          mediaTableRef.value.toggleRowSelection(row, false)
        } else {
          formData.mediaids.push(row.mediaid)
          mediaTableRef.value.toggleRowSelection(row, true)
        }
      }
      /** 批量通过审核 **/
      const handleBatchPass = () => {
        formData.state = 2
        if (formData.mediaids.length <= 0) {
          ElMessage({type: 'warning', message: '请选择要操作的媒资', duration: 2000})
        } else {
          postFormData()
        }
      }
      /** 批量不通过审核 **/
      const handleBatchNoPass = () => {
        formData.state = 3
        if (formData.mediaids.length <= 0) {
          ElMessage({type: 'warning', message: '请选择要操作的媒资', duration: 2000})
        } else {
          postFormData()
        }
      }
      /** 提交数据 **/
      const postFormData = () => {
        ElMessageBox.prompt('请填写审核意见（选填）', '审核意见', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'textarea',
          inputPlaceholder: '请输入审核意见',
        }).then(({value}) => {
          formData.comments = value
          postReviewMedias(formData).then(response => {
            if (response.errcode == 0) {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              formData.mediaids = []
              getDataList()
            } else {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
            }
          })
        }).catch(() => {})
      }
      /** 查看媒资审核记录 **/
      const handleMediaReviewLogs = (row) => {
        dialogReviewLogsTitle.value = '媒资 ' + row.name + ' 审核记录'
        dialogReviewMediaid.value = row.mediaid
        dialogReviewLogsVisible.value = true
        nextTick(() => {
          mediaReviewLogsRef.value.getDataList()
        })
      }
      /** 关闭媒资审核记录弹框 **/
      const handleCancelReviewLogsDialog = () => {
        dialogReviewLogsVisible.value = false
      }

      const init = () => {
        getDataList()
      }
      init()

      return {
        queryList,
        isloading,
        tableData,
        getDataList,
        stateList,
        handleFilterMedia,
        getStateName,
        handlePassReview,
        handleNoPassReview,
        srcList,
        initialIndex,
        handleToMediaDetail,
        mediaTypes,
        handleSelectRow,
        handleSelectAllRow,
        handleClickRow,
        mediaTableRef,
        handleBatchPass,
        handleBatchNoPass,
        selectedState,
        handleMediaReviewLogs,
        dialogReviewLogsTitle,
        dialogReviewLogsVisible,
        dialogReviewMediaid,
        handleCancelReviewLogsDialog,
        mediaReviewLogsRef,
        tableHeight
      }
    }
  }
</script>

<style scoped>

</style>
